<template>
  <div class="drawerContent" style="transform: translate3d(0,0,0)">

    <div class="drawerContent-header">

      <div class="drawerContent-header-wrapper">

        <img class="drawerContent-header-img" :src="userData.icon" alt="">

        <div class="drawerContent-header-notice">
          {{userData.name}}
        </div>

      </div>

    </div>

    <div class="drawerContent-main" :class="{'drawerContent-main_normal':!userData.isAgency}">
      <scroll ref="scroll" :data="goodsTypes.list" :scrollbar="false" :bounce="true">
        <div>
          <ul class="drawerContent-main-list">
            <li @click="selectGoodsType(-1)" class="drawerContent-main-item" :class="{'drawerContent-main-item_active':-1 == goodsTypes.active}">
               <i></i>
               <span>首页</span>
            </li>
            <template v-for="item in goodsTypes.list">
              <li @click="selectGoodsType(item.id)" class="drawerContent-main-item" :class="{'drawerContent-main-item_active':item.id == goodsTypes.active}">
                <i></i>
                <span>{{item.name}}</span>
              </li>
            </template>
          </ul>
        </div>
      </scroll>
    </div>
    <div class="drawerContent-bottom" v-if="userData.isAgency">
      <router-link class="drawerContent-bottom-setter" tag="div" to="/setting">
        <x-icon type="ios-ionic-outline" size="20" style="position: relative;top: 5px;color: #c7a45b;"></x-icon>
         总代理设置
      </router-link>
    </div>
    <div class="drawerContent-bottom" v-if="!userData.isAgency" @click="handleLogin">
      <div class="drawerContent-bottom-setter" style="position: relative;top: -1rem;">
        <x-icon type="ios-ionic-outline" size="20" style="position: relative;top: 5px;color: #c7a45b;"></x-icon>
         登录
      </div>
    </div>
  </div>
</template>
<script>
import { Blur } from 'vux'
import { mapGetters, mapMutations } from "vuex";
import { getList } from "api/drawer";
import scroll from "base/scroll/scroll";
import Bus from "common/js/bus"
export default {
  props: {},
  data() {
    return {

    }
  },
  methods: {
    async _getList() {
      this.setGoodsList(await getList() || []);
    },
    selectGoodsType(index){
       //改变分类项目
       if(index === -1){
         this.setDrawerState(false);
         this.setGoodsIndex(index);
         this.$router.push({path:`/`});
         return
       };
       this.setGoodsIndex(index);
       this.$router.push({path:`/classify/${index}`})
    },
    goHome(){
      this.$router.push({path:`/`});

    },
    handleLogin(){
      this.$emit("on-login")
    },
    ...mapMutations({
      "setGoodsList": "SET_GOODSTYPES_LIST",
      "setGoodsIndex": "SET_GOODS_INDEX",
      "setDrawerState": "SET_DRAWER_STATE",
    })
  },
  components: { scroll, Blur },
  created: function() {

  },
  mounted: function() {
    this._getList();
  },
  destroyed: function() {

  },
  computed: {
    wHight() {
      return document.body.clientHeight
    },
    ...mapGetters(['userData', 'goodsTypes'])
  },
  watch: {
    'userData.isAgency'() {
      this.$refs.scroll.refresh();
    }
  }
}
</script>
<style lang="less" scoped="">
@import "../common/style/helpers/mixins";
.drawerContent {
  width: 200px;
  height: 100%;
  &-header {
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &-wrapper {
      height: 75px;
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &-img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
      background-color: #ccc;
    }

    &-notice {
      height: 22px;
      line-height: 24px;
      font-size: 13px;
      width: 100%;
      text-align: center;
      color: #666;
      .omit();
    }
  }
  &-main {
    height: 65%;
    width: 100%;
    overflow: hidden;
    &_normal {
      height: 72%;
    }
    &-list {}
    &-item {
      i {
        display: inline-block;
        height: 0.25rem;
        width: 0.25rem;
        background: #333;
        position: relative;
        top: 0.04rem;
        border-radius: 0.05rem;
      }
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 0.2rem 0 0.52rem;
      color: #333;
      transition: all 0.3s;
      &_active {
        i {
          background: rgba(247, 164, 91, 1);
        }
        color: rgba(247, 164, 91, 1);
      }
    }
  }
  &-bottom {
    height: 10%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    &-setter {
      padding-bottom: 5px;
      font-size: 0.26rem;
      color: #c7a45b;
    }
  }
}
</style>
